import React, { useState, useEffect } from "react";
import EditorLayout from "./components/EditorLayout";
import "./App.css";
import { EditorMode, IEditorService } from "./types";
import { useInversify } from "./providers/InversifyProvider";

const App: React.FC = () => {
    const container = useInversify();
    const editorService = container.get<IEditorService>("IEditorService");
    const [mode, setMode] = useState<EditorMode>(editorService.getMode());

    useEffect(() => {
        const unsubscribe = editorService.subscribe((state) => {
            setMode(state.mode);
        });

        return () => unsubscribe();
    }, [editorService]);

    const handleModeChange = (newMode: EditorMode) => {
        editorService.setMode(newMode);
    };

    return (
        <div className="app">
            <EditorLayout mode={mode} onModeChange={handleModeChange} />
        </div>
    );
};

export default App;
